<script setup lang="ts">
import { ref, computed, watch } from 'vue'

// v-model
const formData = ref({
  username: '',
  password: '',
  isChecked: '',
})

// 计算属性
const userInfo = ref({
  firstName: 'jack',
  lastName: '詹姆斯',
})

// 内部使用的数据发生改变才会重新执行
// const fullName = computed(() => {
//   console.log('计算属性重新执行啦')
//   return userInfo.value.firstName + userInfo.value.lastName
// })

// 页面中任意数据发生改变就会 重新执行（性能上比计算属性要差）
const getFullName = () => {
  console.log('函数重新执行啦')
  return userInfo.value.firstName + userInfo.value.lastName
}

// 计算属性的 get 和 set
// 完整写法如下
// 取值会执行 get
// 赋值会执行 set 可以通过参数获取到传入的值
// 购物车的全选和反选
const fullName = computed({
  get() {
    console.log('计算属性重新执行啦')
    return userInfo.value.firstName + userInfo.value.lastName
  },
  // 省略不写会有提示
  set(value) {
    console.log(value)
    const arr = value.split('|')
    userInfo.value.firstName = arr[0]
    userInfo.value.lastName = arr[1]
  },
})

// watch 数据发生改变之后要执行一些逻辑
// 某个数据在多个地方都可能被修改，数据修改之后有一些统一的逻辑要执行
// 就推荐使用 watch 类比于鸿蒙中的 @watch
// 数据重新赋值，但是没有改变，不会触发
// watch(
//   userInfo,
//   () => {
//     console.log('userInfo改变了')
//   },
//   { deep: true } // 深度监听
// )
watch(
  () => userInfo.value.lastName,
  () => {
    console.log('lastName改变了')
  }
)
</script>
<template>
  <h2>第四页</h2>
  <!-- 双向绑定 
    数据改变-ui 更新
    ui 更新-数据改变 
  -->
  <input type="text" v-model="formData.username" placeholder="用户名" />
  <input type="password" v-model="formData.password" placeholder="密码" />
  <br />
  <input type="checkbox" v-model="formData.isChecked" />
  <button>提交</button>
  <!-- 计算属性用的时候直接写即可 -->
  <h2>全名:{{ fullName }}</h2>
  <h2>全名2:{{ getFullName() }}</h2>
  <button @click="userInfo.firstName += '!'">改名字</button>
  <button @click="fullName = 'rose | li'">fullName 赋值</button>
</template>
<style scoped></style>
